<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>收入管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4"
                v-show="isAdd">
          <el-button type="primary"
                     @click="addUser('sanhu')">添加散户类型</el-button>
        </el-col>
      </el-row>
      <el-table :data="datas"
                style="width:100%"
                border
                stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column prop="name"
                         label="散户类型">
        </el-table-column>
        <el-table-column prop="alias"
                         label="类型别名">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         :width="isAdd?100:50">
          <!-- <el-table-column label="操作"
                         width="100"> -->
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row._id,'sanhu')">编辑</el-button>
            <el-button type="text"
                       size="small"
                       @click="remove(scope.row._id,'sanhu')"
                       v-if="isAdd">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--------添加新用户对话框--------->
    <el-dialog title="新加散户类型"
               :visible.sync="addShow"
               width="30%"
               @close="addDialogClosed">
      <el-form ref="addDataFormRef"
               :model="addForm"
               :rules='addMemberRule'>
        <el-form-item label="散户类型"
                      prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型别名（英文)"
                      prop="alias">
          <el-input v-model="addForm.alias"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary"
                   @click="addData('sanhu')">确 定</el-button>
      </span>
    </el-dialog>
    <!--------编辑用户对话框--------->
    <el-dialog title="编辑散户类型"
               :visible.sync="editShow"
               width="30%"
               @close="editDialogClosed">
      <el-form ref="editDataFormRef"
               :model="editForm"
               :rules='editRule'>
        <el-form-item label="散户类型"
                      prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary"
                   @click="editData('sanhu')">确 定</el-button>
      </span>
    </el-dialog>
    <!--------------------------------------------------->
    <el-card>
      <el-row>
        <el-col :span="4"
                v-show="isAdd">
          <el-button type="primary"
                     @click="addUser('card')">添加油卡类型</el-button>
        </el-col>
      </el-row>
      <el-table :data="datas2"
                style="width:100%"
                border
                stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column prop="name"
                         label="油卡类型">
        </el-table-column>
        <el-table-column prop="alias"
                         label="类型别名">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         :width="isAdd?100:50">
          <!-- <el-table-column label="操作"
                         width="100"> -->
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row._id,'card')">编辑</el-button>
            <el-button type="text"
                       size="small"
                       @click="remove(scope.row._id,'card')"
                       v-if="isAdd">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--------添加新用户对话框--------->
    <el-dialog title="新加油卡类型"
               :visible.sync="addShow2"
               width="30%"
               @close="addDialogClosed2">
      <el-form ref="addDataFormRef2"
               :model="addForm2"
               :rules='addMemberRule2'>
        <el-form-item label="油卡类型"
                      prop="name">
          <el-input v-model="addForm2.name"></el-input>
        </el-form-item>
        <el-form-item label="类型别名（英文)"
                      prop="alias">
          <el-input v-model="addForm2.alias"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addShow2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="addData('card')">确 定</el-button>
      </span>
    </el-dialog>
    <!--------编辑用户对话框--------->
    <el-dialog title="编辑油卡类型"
               :visible.sync="editShow2"
               width="30%"
               @close="editDialogClosed2">
      <el-form ref="editDataFormRef2"
               :model="editForm2"
               :rules='editRule2'>
        <el-form-item label="油卡类型"
                      prop="name">
          <el-input v-model="editForm2.name"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editShow2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="editData('card')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isChinese } from '../plugins/validate'
export default {
  name: 'member',
  data () {
    return {
      isAdd: true,
      role: '',
      names: '',
      addForm: {
        name: '',
        alias: ''
      },
      addMemberRule: {
        name: [
          { required: true, message: '请输入散户类型' }
        ],
        alias: [
          { required: true, message: '请输入别名' },
          { validator: isChinese, message: '只能为英文' }
        ]
      },
      datas: [],
      addShow: false,
      editForm: {
        name: '',
        _id: ''
      },
      editRule: {
        name: [
          { required: true, message: '请输散户类型' }
        ],
      },
      editShow: false,
      addForm2: {
        name: '',
        alias: ''
      },
      addMemberRule2: {
        name: [
          { required: true, message: '请输入油卡类型' }
        ],
        alias: [
          { required: true, message: '请输入别名' },
          { validator: isChinese, message: '只能为英文' }
        ]
      },
      datas2: [],
      addShow2: false,
      editForm2: {
        name: '',
        _id: ''
      },
      editRule2: {
        name: [
          { required: true, message: '请输入会油卡类型' }
        ],
      },
      editShow2: false,
    }
  },
  created () {
    this.findAll()
  },
  methods: {
    addUser (parm) {
      if (parm === 'sanhu') {
        this.addShow = true
      } else {
        this.addShow2 = true
      }
    },
    addData (parm) {
      if (parm === 'sanhu') {
        this.$refs.addDataFormRef.validate(valid => {
          if (!valid) return
          let url = '/api/addSanhu'
          this.$http.post(url, this.$qs.stringify(this.addForm)).then(res => {
            if (res.status === 200) {
              console.log(res.data)
              this.$common.succ(res.data)
              this.findAll()
              this.addShow = false
            } else {
              this.$common.fail('添加失败')
            }
          })
        })
      } else {
        this.$refs.addDataFormRef2.validate(valid => {
          if (!valid) return
          let url = '/api/addCardsMan'
          this.$http.post(url, this.$qs.stringify(this.addForm2)).then(res => {
            if (res.status === 200) {
              this.$common.succ(res.data)
              this.findAll()
              this.addShow2 = false
            } else {
              this.$common.fail('添加失败')
            }
          })
        })
      }
    },
    addDialogClosed () {
      this.$refs.addDataFormRef.resetFields()
    },
    editDialogClosed () {
      this.$refs.editDataFormRef.resetFields()
    },
    addDialogClosed2 () {
      this.$refs.addDataFormRef2.resetFields()
    },
    editDialogClosed2 () {
      this.$refs.editDataFormRef2.resetFields()
    },
    findAll () {
      //散户
      let url = '/api/findSanhu'
      this.$http.get(url).then(res => {
        if (res.status === 200) {
          this.datas = res.data
        } else {
          console.log(err)
        }
      })
      //油卡
      let url2 = '/api/findCardsMan'
      this.$http.get(url2).then(res => {
        if (res.status === 200) {
          this.datas2 = res.data

        } else {
          console.log(err)
        }
      })
    },
    edit (id, parm) {
      if (parm === 'sanhu') {
        this.editShow = true
        let url = '/api/findOneSanhu'
        this.$http.post(url, this.$qs.stringify({ _id: id })).then(res => {
          if (res.status === 200) {
            this.editForm = res.data
          }
        })
      } else {
        this.editShow2 = true
        let url = '/api/findOneCardsMan'
        this.$http.post(url, this.$qs.stringify({ _id: id })).then(res => {
          if (res.status === 200) {
            this.editForm2 = res.data
          }
        })
      }
    },
    editData (parm) {
      if (parm === 'sanhu') {
        this.$refs.editDataFormRef.validate(valid => {
          if (!valid) return
          let url = '/api/updateSanhu'
          this.$http.post(url, this.$qs.stringify(this.editForm)).then(res => {
            if (res.status === 200) {
              this.$common.succ('恭喜，编辑成功！')
              this.findAll()
              this.editShow = false
            } else {
              this.$common.fail('编辑失败!')
            }
          })
        })
      } else {
        this.$refs.editDataFormRef2.validate(valid => {
          if (!valid) return
          let url = '/api/updateCardsMan'
          this.$http.post(url, this.$qs.stringify(this.editForm2)).then(res => {
            if (res.status === 200) {
              this.$common.succ('恭喜，编辑成功！')
              this.findAll()
              this.editShow2 = false
            } else {
              this.$common.fail('编辑失败!')
            }
          })
        })
      }
    },
    remove (id, parm) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (parm === 'sanhu') {
          let url = '/api/deleteSanhu'
          this.$http.post(url, this.$qs.stringify({ _id: id })).then(data => {
            this.$common.succ('删除成功！')
            this.findAll()
          })
        } else {
          let url = '/api/deleteCardsMan'
          this.$http.post(url, this.$qs.stringify({ _id: id })).then(data => {
            this.$common.succ('删除成功！')
            this.findAll()
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>
<style scoped>
.el-card,
.el-table {
  margin-top: 30px;
}
.el-table {
  margin-bottom: 30px;
}
</style>